import { memo, useState, useMemo } from 'react'
import { Layout, Input, theme, Space, Tooltip } from 'antd';
import styles from './index.module.less';
import { debounce } from '@/utils/debounceThrottle';

const { Sider } = Layout;
const { Search } = Input;
const DocDetailSide = () => {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    const [collapsed, setCollapsed] = useState(false);
    //搜索
    const onSearch = () => {
        alert(111)
    }
    const debouncedOnSearch = useMemo(() => debounce(onSearch, 300), [onSearch]);
    return (
        <Sider
            width={300}
            breakpoint="lg"
            collapsed={collapsed}
            onCollapse={setCollapsed}
            collapsedWidth={80}
            // collapsible={true}  是否可收起
            className={styles.sider}
            style={{
                background: colorBgContainer,
            }}
        >
            <Space direction="vertical">
                <Search
                    placeholder="请输入要搜索的内容"
                    allowClear
                    enterButton="搜索"
                    size="large"
                    onSearch={debouncedOnSearch}
                    className={styles.search}
                />
            </Space>
        </Sider>
    );
}

export const MemoDocDetailSide = memo(DocDetailSide)